import React from 'react';
import './App.css';
import { connect } from 'react-redux'
import {addToDoinge,addToFinish} from './redux/actions'

class App extends React.Component {
  constructor(props){
    super(props)
  }
  render(){
     return (
      <div className="App">
        <input ref="input" text="text" /><button onClick={()=>{
          var value = this.refs.input.value
          this.props.addTodo(value)
        }}>添加</button>
        <div>正在进行</div>
        <div>
          {
            this.props.todoList.map((ele,index)=>{
              return <div key={index}>
                <input type="checkbox" checked={false} onClick={()=>{
                  this.props.addFish(ele)
                }}/>
                <span>{ele.text}</span>
              </div>
            })
          }
        </div>
        <div>已完成</div>
        <div>
          {
            this.props.fishList.map((ele,index)=>{
              return <div key={index}>
                <input type="checkbox" checked={true} onClick={()=>{
                  this.props.addFish(ele)
                }}></input>
                <span>{ele.text}</span>
              </div>
            })
          }
        </div>
      </div>
    )
  }
}

function mapStateToProps(rootReducer) {
  return{
    todoList:rootReducer.todoReducer.toDoinge,
    fishList:rootReducer.todoReducer.toFinish
  }
}

function mapActionsToProps(dispatch) {
  return{
    addTodo:(value)=>{dispatch(addToDoinge(value))},
    addFish:(todo)=>{dispatch(addToFinish(todo))}
  }
}

export default connect(mapStateToProps,mapActionsToProps)(App);
